import React, { useState, useEffect } from "react"
import "../App.css"
import RouterView from "../Router/RouterView"
import { Layout, Menu, } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

function App(props) {

    const { routes } = props
    const { SubMenu } = Menu;
    const { Header, Content, Sider } = Layout;
    const list = [
        {
            path: "/app/re",
            name: "热点"
        },
        {
            path: '/app/chat',
            name: "话题"
        },
        {
            path: '/app/live',
            name: "生活"
        },
        {
            path: "/app/sleep",
            name: "睡眠",
        },
        {
            path: "/app/man",
            name: "男性"
        },
    ]


    //科学管理
    const goTo = (item) => {
        props.history.push(item.path)
    }
    //药品管理
    const gohome = () => {
        props.history.push("")
    }
    //人员管理
    const gostaff = () => {
        props.history.push("/app/staff")
    }

    const tologin = () => {
        props.history.push('/login')
        localStorage.clear()
    }

    //同步
    const [name, setName] = useState('')
    const [img, setImg] = useState('')

    useEffect(() => {
        setName(localStorage.getItem('username'))
        setImg(localStorage.getItem('img'))
    }, [])

    return (
        <div className="app">
            <Layout>
                <Header className="header">
                    <font>美洽智慧医疗后台管理系统</font>
                    <div className="touxiang" onClick={() => { tologin() }}>
                        <img src={img} alt="" />
                        <span>{name}</span>
                    </div>
                </Header>

                <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
                    <Sider className="site-layout-background" width={200}>
                        <Menu
                            mode="inline"
                            // defaultSelectedKeys={['1']}
                            // defaultOpenKeys={['sub1']}/*  */
                            style={{ height: '100%' }}
                        >
                            <SubMenu key="sub1" icon={<UserOutlined />} title="科学管理">
                                {
                                    list.length && list.map((item, index) => {
                                        return <Menu.Item key={index} onClick={() => { goTo(item) }}>{item.name}</Menu.Item>
                                    })
                                }
                            </SubMenu>

                            <Menu.Item icon={<LaptopOutlined />} key="sub2" onClick={() => { gohome() }}>药品管理</Menu.Item>
                            <Menu.Item icon={<NotificationOutlined />} key="sub3" onClick={() => { gostaff() }}>问询解答</Menu.Item>
                        </Menu>
                    </Sider>
                    <Content style={{ padding: '0 24px', minHeight: 280 }}> <RouterView routes={routes}></RouterView></Content>
                </Layout>

            </Layout>,

        </div>
    )
}

export default App
